<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <div style="font-size:20px;margin-bottom:20px;">人员管理</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入用户名" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          <el-button @click="add" size="small" >新建</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="realName" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" label="用户名" width="150px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="手机" show-overflow-tooltip></el-table-column>
        <el-table-column prop="job" label="职位" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="projectNames" label="所属项目" show-overflow-tooltip> </el-table-column>-->
        <el-table-column prop="status" label="用户状态" show-overflow-tooltip>
            <template slot-scope="scope">
                <span>{{scope.row.status === 1 ? '正常' : scope.row.status === 2 ? '停用' : ''}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="roleName" label="用户角色" show-overflow-tooltip ></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="text" size="mini" @click="update(scope.row)">编辑</el-button>
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="deleteItem(scope.row.id)" v-if="role!='SUPER'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 查看弹框区域 -->
    <el-dialog :title="title" :visible.sync="dialogTableVisible">
      <!-- 弹框主体内容 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        size="small"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
      <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="姓名" prop="realname">
              <el-input v-model="ruleForm.realName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="登录名" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户密码" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="职位" prop="job">
              <el-input v-model="ruleForm.job"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户角色" prop="roleCode">
              <el-select v-model="ruleForm.roleCode" placeholder="请选择用户角色">
                <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName" :value="item.roleCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="角色状态" prop="status">
               <el-select v-model="ruleForm.status" placeholder="请选择角色状态">
                <el-option label="正常" :value="1"></el-option>
                <el-option label="停用" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="所属项目" prop="name">
             <el-select v-model="ruleForm.projects" placeholder="请选择所属项目" multiple filterable>
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
        </el-form-item>
      </el-form>
      <div class="botton_btn">
        <el-button @click="resetForm('ruleForm')" v-if="title == '新增'">重置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role:localStorage.getItem('role'),
      name: "",
      tableData: [],
      //   分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogTableVisible: false, // 弹框是否显示
      particularsList: [], //详情数据
      title: '新增',
      rules: {
        realName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        username: [
            { required: true, message: '请输入登录名', trigger: 'blur' }
        ],
        phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {pattern: /^1[3456789]\d{9}$/, message: '输入正确的手机号'}
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        job: [
            { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        projects: [
            { required: true, message: '请选择所属项目', trigger: 'change' }
        ],
        status: [
            { required: true, message: '请选择角色状态', trigger: 'change' }
        ],
        roleCode: [
            { required: true, message: '请选择用户角色', trigger: 'change' }
        ]
      },
      ruleForm: {
          realName:'',
          username: '',
          phone: '',
          password: '',
          job: '',
          projects: [],
          status: null,
          roleCode: ''
      },
      roleList: [],
      options: [],
      id: ''
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    getRole(){
        this.$api.loginhome.role().then(res => {
            // console.log(res)
            if(res.success) {
                this.roleList = res.data
            }
        })
    },
    //查询所有项目 
    find() {
      this.$api.loginhome.findAllNcpr().then(res => {
        if(res.success) {
          this.options = res.data
        }
      })
    },
    //新增
    add() {
      
      // console.log(this.$refs['ruleForm'])
      this.$nextTick(()=>{
          this.$refs['ruleForm'].resetFields();
      }) 
      // this.$refs['ruleForm'].resetFields()
      this.ruleForm = {
        realName:'',
        username: '',
        phone: '',
        password: '',
        job: '',
        projects: [],
        status: null,
        roleName: ''
      }
      this.title = '新增'
      this.dialogTableVisible = true
    },
    // 修改跳转
    update(row) {
      this.title = '修改'
      // row.projects = row.projects.split(',')
      let data = JSON.parse(JSON.stringify(row))
      this.ruleForm = data
      this.id = data.id
      this.dialogTableVisible = true
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                let params = this.ruleForm
                this.roleList.forEach(item=>{
                  if(item.roleCode == params.roleCode)
                  params.roleName = item.roleName
                })
                if(this.title === '新增') {
                this.$api.loginhome.useAdd(params).then(res => {
                    if(res.success) {
                        this.dialogTableVisible = false
                        this.$refs['ruleForm'].resetFields();
                        this.$message.success("新增成功")
                        this.getList()
                    }else{
                      this.$message.error(res.message)
                    }
                })
                } else {
                    this.$api.loginhome.useUpdate({...params,id:this.id}).then(res => {
                        if(res.success) {
                            this.dialogTableVisible = false
                            this.$refs['ruleForm'].resetFields();
                            this.$message.success("修改成功")
                            this.getList()
                        }else{
                      this.$message.error(res.message)
                    }
                    })
                }
            } else {
                return false;
            }
        })
    },
    resetForm(formName) {
       this.ruleForm = {
        realName:'',
        username: '',
        phone: '',
        password: '',
        job: '',
        projects: [],
        status: null,
        roleName: ''
      }
      // this.$refs[formName].resetFields();
    },
    //删除
    deleteItem(row) {
        this.$confirm('此操作将删除此用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.loginhome.useDel(row).then(res => {
              if(res.success) {
                  this.$message.success('删除成功')
                  this.getList()
              } else {
                  this.$message.error(res.message)
              }
          })
        })
    },
    //刷新列表
    getList(val) {
      if (val) {
        this.currentPage = 1;
      }
      let params = {
        name: this.name,
        start: this.currentPage - 1,
        pageSize: this.pageSize
      };
      this.$api.loginhome
        .useList(params)
        .then(res => {
          this.tableData = res.data;
          this.total = res.recordsTotal;
          this.getRole()
          this.find()
        })
        .catch(() => {});
    }
  },
  created() {
    this.getList()
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
.con_dialog h4 {
  margin: 7px 0px 7px 30px;
}
.con_dialog p {
  margin: 7px 0px 7px 60px;
  font-size: 12px;
}
.mapbox {
  width: 610px;
  height: 220px;
  background: gainsboro;
  margin: 10px 0px 7px 60px;
}
.time_span {
  text-align: right;
  padding: 10px 48px 10px 10px;
}
.demo-ruleForm{
    margin-top:20px;
}
.botton_btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
